<template>
  <p>{{ obj.hobby.eat }}</p>
  <!-- <button @click="obj = { hobby: { eat: '面条' } }">修改 obj.hobby.eat</button> -->
  <button @click="handleClick">修改 obj.hobby.eat</button>
</template>

<script>
import { watch, ref } from 'vue'
export default {
  name: 'App',
  setup() {
    const obj = ref({
      hobby: {
        eat: '西瓜',
      },
    })
    const handleClick = () => {
      // 修改第一层就可以触发监听啦
      obj.value = { hobby: { eat: '面条' } }
    }
    // 监听 ref 类型是数据，默认并没有开启深度监听
    watch(obj, (newValue, oldValue) => {
      console.log(newValue, oldValue)
    })

    return { obj, handleClick }
  },
}
</script>
